<template>
  <div>
    <my-search
      :layout="formItems"
      :model="searchModel"
      :form-conf="searchConf"
      :btn-conf="searchBtnConf"
      class="myLayoutTop mySearch"
      @btnClick="mySearchBtnClick"
    ></my-search>
    <el-tabs v-model="activeTab" class="myLayoutCenter" @tab-click="tabClick">
      <el-tab-pane
        v-for="(item, index) in tabs"
        :key="index"
        :label="item.title"
        :name="item.name"
        stretch
      >
        <el-input
          :key="'input' + index"
          v-model="item.content"
          type="textarea"
          autosize
          readonly
        ></el-input>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import MySearch from '../../../components/base/mySearch'
import menu from '../../../components/mixins/menu'
import { formItemsGetByName } from '../../../components/common/common'

export default {
  name: 'Index',
  components: { MySearch },
  mixins: [menu],
  layout: 'Admin',
  data() {
    return {
      searchModel: {
        dbAlias: null,
        tableName: null,
        groupName: null
      },
      searchConf: {
        labelSuffix: null,
        inline: true,
        labelWidth: '1px'
      },
      searchBtnConf: {
        buttons: [
          { name: '生成代码', type: 'primary' },
          { name: '单个文件下载', type: 'primary', plain: true },
          { name: '批量下载', type: 'primary', plain: true }
        ]
      },
      formItems: [
        {
          elFormItem: {
            prop: 'dbAlias',
            label: '',
            type: 'input',
            placeholder: '请输入数据库别名'
          }
        },
        {
          elFormItem: {
            prop: 'tableName',
            label: '',
            type: 'input',
            placeholder: '请输入表名'
          }
        },
        {
          elFormItem: {
            prop: 'groupName',
            label: '',
            type: 'select',
            placeholder: '请选择模板组名',
            options: []
          }
        }
      ],
      tabs: [],
      activeTab: null
    }
  },
  watch: {
    'searchModel.groupName': {
      handler() {
        this.getNames()
      },
      deep: true
    }
  },
  mounted() {},
  created() {
    this.routerQuery = this.$route.query
    this.searchModel.dbAlias = this.routerQuery.name
    this.searchModel.tableName = this.routerQuery.tableName
    if (this.searchModel.name != null && this.searchModel.tableName != null) {
      this.mySearchBtnClick()
    }
    this.getGroups()
    this.getNames()
  },
  methods: {
    async mySearchBtnClick(btnItem) {
      let urlPrefix = this.$store.state.base.urlPrefix
      if (!urlPrefix.endsWith('/')) {
        urlPrefix = urlPrefix + '/'
      }
      if (btnItem.name === this.searchBtnConf.buttons[0].name) {
        btnItem.loading = true
        await this.getInitData(this.searchModel)
        btnItem.loading = false
      } else if (btnItem.name === this.searchBtnConf.buttons[1].name) {
        window.location.href =
          urlPrefix +
          'code/down?dbAlias=' +
          this.searchModel.dbAlias +
          '&tableName=' +
          this.searchModel.tableName +
          '&groupName=' +
          this.searchModel.groupName +
          '&enjoyName=' +
          this.activeTab
      } else if (btnItem.name === this.searchBtnConf.buttons[2].name) {
        window.location.href =
          urlPrefix +
          'code/down?dbAlias=' +
          this.searchModel.dbAlias +
          '&tableName=' +
          this.searchModel.tableName +
          '&groupName=' +
          this.searchModel.groupName
      }
    },
    async getInitData() {
      await this.api(this.activeTab)
    },
    async tabClick(item) {
      await this.api(item.name)
    },
    async api(enjoyName) {
      if (
        this.searchModel == null ||
        this.searchModel.tableName == null ||
        this.searchModel.dbAlias == null
      ) {
        this.$message.success('参数不能为空')
        return
      }
      const params = Object.assign({ enjoyName }, this.searchModel)

      try {
        const data = await this.$axios.post('/code/generate', params)
        this.tabs.map((value, index) => {
          if (value.name === this.activeTab) {
            value.content = data.data
          }
        })
      } catch (e) {
        console.log(e)
      }
    },
    async getGroups() {
      const data = await this.$axios.post('/code/groups', {})
      const item = formItemsGetByName(this.formItems, 'groupName')
      if (data.data && data.data.length > 0) {
        item.elFormItem.options = data.data
        this.searchModel.groupName = data.data[0].value
      }
    },
    async getNames() {
      this.tabs = []
      if (this.searchModel.groupName) {
        const data = await this.$axios.post(
          '/code/names?groupName=' + this.searchModel.groupName
        )
        if (data.data && data.data.length > 0) {
          this.tabs = data.data
          this.activeTab = data.data[0].name
        }
      }
    }
  }
}
</script>

<style scoped>
.el-textarea__inner,
textarea {
  border: 0;
}
</style>
